<template>
  <van-tabs :before-change="beforeChange" v-model="active">
    <van-tab v-for="(val,key) in cates" :title="val.tag"></van-tab>
  </van-tabs>
</template>
<script>
  import {
    computed,
    defineComponent,
    ref,
    toRefs,
    onMounted,
    reactive,
    watch,
    getCurrentInstance,
  } from "vue";
  export default defineComponent({
    props:{
      modelValue:{
        default:""
      }
    },
    setup(props) {
      const { proxy } = getCurrentInstance();
      const data = reactive({
        active:0,
        cates:[],
      });
      onMounted(async () => {
        const res = await proxy.$get("v1/video/categories")
        const cates = res.data
        cates.unshift({tag:"全部"})
        data.cates = cates
      })
      
      const beforeChange = (index) => {
        proxy.$emit('update:modelValue', data.cates[index].id)
        return new Promise((resolve) => {
          resolve(true);
        });
      }
      const submit = async () => {};
      return {
        ...toRefs(data),
        beforeChange,
        submit,
      };
    },
  });
</script>
<style lang="less" scoped>
  .home {
    background: rgba(248, 248, 248, 1);
    min-height: calc(100vh);
    overflow: hidden;
    background-size: cover;
    position: relative;
  }
  .video-list {
  }
  .video-item {
  }
</style>
